<template>
  <div class="older">
    <searchHead :option1="option1" :option2="option2" :title="'请输入订单号'" @getData="getData"/>
    <div class="older-list ">
        <div class="older-item box-style">
            <div class="older-title">订单详情</div>
            <div class="older-l">
              <span>投注金额:</span>
              <span>xxxxxxxxxxxxx</span> 
            </div>

            <div class="older-l">
              <span>订单号:</span>
              <span>xxx6665xxxxx</span>
            </div>

            <div class="older-l">
              <span>下单时间:</span>
              <span>xxxxxxxxxxx</span>
            </div>

            <div class="older-l">
              <span>中奖方式:</span>
              <span>单品摇</span>
            </div>

            <div class="older-l">
              <span>投注次数:</span>
              <span>1</span>
            </div>

            <div class="older-l">
              <span>商品名称:</span>
              <span>观海，某某</span>
            </div>
            <div class="older-l">
              <span>支付状态:</span>
              <span>支付成功</span>
            </div>

            <div class="older-img">
              <img src="../../assets/image/user.png"/>
              <div>微信昵称</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import searchHead from '@/components/searchHead/searchHead.vue';
import Enums from "@/utils/enums.js";
export default {
  components:{
    searchHead
  },
  data () {
    return {
      option1: [],
        option2: [],
    }
  },
  methods:{

    getData(val){
        console.log(val)
    }
  },
  created(){},
  mounted(){
    this.option1 = Enums.lucky_method.list
    this.option2 = Enums.older_enums.list
  },
}
</script>
<style scoped lang="scss">
.older{
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
}
.older-title{
  border-bottom: 1px solid #f8f8f8;
  height: 32px;
  line-height: 32px;
}
.older-list{
  padding: 8px;
}
 .older-item{
   display: flex;
   flex-direction: column;
   gap: 12px;

 }
 .older-l{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px;
 }
 .older-img{
  display: flex;
  align-items: center;
  border-top: 1px solid #f8f8f8;
  height: 80px;
  padding: 0px 8px;
  img{
    width: 64px;
    height: 64px;
    margin-right: 8px;
  }
 }
</style>